<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-26 17:53:48
 * @LastEditTime: 2019-09-01 17:23:15
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="main a_page_2">
    <div class="bg-div">
      <img class="animate-bg" src="../assets/images/bg2.jpg" />
      <div class="audio">
        <VueAudio ref="audioss" 
        :audioCurrentTime="playtime" 
        :theUrl="audios.url" 
        :theControlList="audios.controlList"
          :routerUrl="router"></VueAudio>
      </div>
      <div class="page2-content">
        <div class="contentMain">
          <div class="content">
            <div class="right">
              <!--<span>A</span>-->
              <!--<span>a</span>-->
              Aa
            </div>
            <div class="left">
              <div class="each-pic pic1">
                <!-- <img ref="appleLetterListAntMore" @click="beginMusicAndEnd('antMore','AntMore')" class="antMore" src="../assets/images/antMore.png" alt /> -->
                <div ref="appleLetterListAntMore" @click="beginMusicAndEnd('antMore','AntMore')" class="more">I an an ant</div>
                <img   ref="appleLetterListAnt"  @click="beginMusicAndEnd('ant','Ant')" src="../assets/images/antBtn.png" alt />
              </div>
              <div class="each-pic pic2">
                <!-- <img ref="appleLetterListAlligatorMore" @click="beginMusicAndEnd('alligatorMore','AlligatorMore')" class="alligatorMore" src="../assets/images/alligatorMore.png" alt /> -->
                <div ref="appleLetterListAlligatorMore" @click="beginMusicAndEnd('alligatorMore','AlligatorMore')" class="more">I an an alligator</div>
                <img  ref="appleLetterListAlligator"  @click="beginMusicAndEnd('alligator','Alligator')"  src="../assets/images/alligatorBtn.png" alt />
              </div>
              <div class="each-pic pic3">
                <img  ref="appleLetterListApple"  @click="beginMusicAndEnd('apple','Apple')" src="../assets/images/appleBtn.png" alt />
                <!-- <img ref="appleLetterListAppleMore" @click="beginMusicAndEnd('appleMore','AppleMore')"  class="appleMore" src="../assets/images/appleMore.png" alt /> -->
                <div ref="appleLetterListAppleMore" @click="beginMusicAndEnd('appleMore','AppleMore')" class="more">This is an apple</div>
              </div>
              <div class="each-pic pic4">
                <img ref="appleLetterListAX"  @click="beginMusicAndEnd('ax','AX')" src="../assets/images/axBtn.png" alt />
                <!-- <img ref="appleLetterListAXMore" @click="beginMusicAndEnd('axMore','AXMore')" class="axMore" src="../assets/images/axMore.png" alt /> -->
                <div ref="appleLetterListAXMore" @click="beginMusicAndEnd('axMore','AXMore')" class="more">This is an ax</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import VueAudio from "./VueAudio";
  export default {
    name: "",
    components: {
      VueAudio
    },
    data() {
      return {
        value1: 50,
        audios: {
          url: "http://resource.kqwhg.cn/doudou/music-one.mp3",
          controlList: "noDownload noSpeed onlyOnePlaying"
        },
        playtime: {
          time: 105,
          randem: Math.random(1000)
        },
        router: "page4",
        musicTimeList: {
ant: {
beginTime: 127.566,
endTime: 3.628,
},
antMore: {
beginTime: 146.721,
endTime: 3.72,
},
alligator:{
beginTime: 132.315,
endTime: 4.116,
},
alligatorMore:{
beginTime: 152.141,
endTime: 4.777,
},
apple:{
beginTime: 137.258,
endTime: 3.582,
},
appleMore:{
beginTime: 159.49,
endTime: 4.18,
},
ax:{
beginTime: 141.852,
endTime: 3.307,
},
axMore:{
beginTime: 165.646,
endTime: 4.639,
},
},
        flag: false,
        timerList:[],
      };
    },
    methods: {
      beginMusicAndEnd(item,index) {
        let that = this;
        that.clearTimer();
        
      console.log('传入的数据：', index)
        if(index) {
          that.$refs['appleLetterList'+index].style.animation = '';
          that.$refs['appleLetterList'+index].style.animationIterationCount = ''
          that.$refs['appleLetterList'+index].style.animation = 'flash 1s 0s both'
          that.$refs['appleLetterList'+index].style.animationIterationCount = '2'
          that.timerList[5] = setTimeout(() => {
            that.$refs['appleLetterList'+index].style.animation = ''
          }, 3000);
        }
        this.playtime.randem = Math.random(1000)
        this.playtime.time = this.musicTimeList[item].beginTime;
        let stop = this.musicTimeList[item].endTime * 1000
        // this.$refs.audios.startPlay();
        that.flag = true;
        that.timerList[3] = window.setTimeout(() => {
          that.$refs.audioss.pausePlay();
          that.clearTimer();
        }, stop);
      },
      clearTimer(){
        for(let i = 0; i <= this.timerList.length; i++){
          window.clearTimeout(this.timerList[i]);
        }
        this.timerList.splice(0, this.timerList.length)
      }
    },
    mounted() {
      let that = this;
      that.flag = true;
      that.timerList[0] = window.setTimeout(() => {
        that.$refs.audioss.startPlay();
        // clearTimeout(that.timerList[0])
        that.clearTimer()
      }, 100);
      that.timerList[1] = window.setTimeout(() => {
        that.$refs.audioss.pausePlay();
        // clearTimeout(that.timerList[1])
        that.clearTimer()
      }, 11000);

    }
  };

</script>

<style lang="scss" scoped>
  .ivu-slider-wrap {
    margin: 0.1rem 0 0 !important;
  }

  .bg-div {
    position: relative;
    width: 100%;
    top: 0;
    right: 0;

    .audio {
      width: 100%;
      height: 0.31rem;
      margin-bottom: 0.1rem;
      /* animation: fadeIn 1s 5.5s both; */
      /* opacity: 0; */
    }

    .animate-bg {
      opacity: 0;
      animation: fadeIn 1s both;
    }

    .page2-content {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }

    .content {
      /*position: absolute;*/
      /*bottom: 1.95rem;*/
      justify-content: space-between;
      display: flex;
      align-items: center;
      width: 80%;
      margin: 1.2rem auto 0;
      //针对手机
      @media screen and (max-width: 768px) {
        width: 100%;
        margin: 0.3rem auto 0;
        }
      }

    .right {
      width: 4.57rem;
      height: 2.85rem;
      margin: 0 0.99rem 0 0.78rem;
      animation: zoomIn 1s 3s both;
      color: #f7931e;
      font-size: 2.85rem;

      //针对手机
      @media screen and (max-width: 768px) {
        width: 2.26rem;
        height: 1.42rem;
      font-size: 1.4rem;
      margin: 0 0.1rem 0 0.1rem;
      }
      span {
        display: inline-block;
      }
    }

    .left {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

        animation: zoomIn 2s 10s both;
      //针对手机
      @media screen and (max-width: 768px) {
      justify-content: center;
      }
      .each-pic {
        cursor: pointer;
        margin-top: 0.3rem;
        width: 42%;
        height: auto;
        // opacity: 0;
        // animation: zoomIn 5s 2s both;
      }
      .more {
        user-select:none;
        cursor: pointer;
        font-size: 0.48rem;
        color: #f7931e;
        font-weight: 500;
        text-align: center;
        line-height: 1.1;
        // width: 2.94rem;
        // height: 0.47rem;
        margin: 0 auto;
        //针对手机
        @media screen and (max-width: 768px) {
          width: 1.47rem;
          height: 0.23rem;
        }
      }
      // .antMore {
      //   width: 2.94rem;
      //   height: 0.47rem;
      //   margin: 0 auto;
      //   //针对手机
      //   @media screen and (max-width: 768px) {
      //     width: 1.47rem;
      //     height: 0.23rem;
      //   }
      // }
      // .alligatorMore {
      //   width: 2.94rem;
      //   height: 0.47rem;
      //   margin: 0 auto;
      //   //针对手机
      //   @media screen and (max-width: 768px) {
      //     width: 1.47rem;
      //     height: 0.23rem;
      //   }
      // }
      // .appleMore {
      //   width: 2.94rem;
      //   height: 0.47rem;
      //   margin: 0 auto;
      //   //针对手机
      //   @media screen and (max-width: 768px) {
      //     width: 1.47rem;
      //     height: 0.23rem;
      //   }
      // }
      // .axMore {
      //   width: 2.94rem;
      //   height: 0.47rem;
      //   margin: 0 auto;
      //   //针对手机
      //   @media screen and (max-width: 768px) {
      //     width: 1.47rem;
      //     height: 0.23rem;
      //   }
      // }
      // .pic1 {
      //   animation: zoomIn 5s 2s both;
      // }

      // .pic2 {
      //   animation: zoomIn 5s 2s both;
      // }

      // .pic3 {
      //   animation: zoomIn 5s 2s both;
      // }

      // .pic4 {
      //   animation: zoomIn 5s 2s both;
      // }
    }
  }
</style>
